<template>
  <div class="message">
    <el-card>
      <p>支付信息</p>
      <el-row
        ><p>订单编号:{{ $store.state.message.id }}</p>
        <button @click="clear">刷新订单号</button></el-row
      >
      <p>商品名称：支付接口演示</p>
      <el-row>
        <p>支付金额(元)：</p>
        <el-radio-group v-model="input">
          <el-col
            ><el-radio :label="0.01">0.01</el-radio>
            <el-radio :label="0.38">0.38</el-radio>
            <el-radio :label="0.53">0.53</el-radio>
            <el-radio :label="0.16">0.16</el-radio>
            <el-radio :label="0.76">0.76</el-radio>
            <!-- <el-radio :label="input">自定义金额</el-radio> -->
          </el-col>
        </el-radio-group></el-row
      >
      <div>
        <el-button
          type="primary"
          class="msg_zf"
          @click="
            dialogVisible = true;
            pay();
          "
          style="float: right"
          >立即支付</el-button
        >
        <el-col :span="4" style="float: right"
          ><el-input v-model="input" placeholder="请输入金额"></el-input
        ></el-col>
      </div>

      <el-dialog
        title="二维码"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <VueQr :margin='8' :size='280' :whiteMargin="true" :logoMargin="3" :logoCornerRadius="20" :text=$store.state.message.qr_code> </VueQr>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: "message",
 components: { VueQr },
  created() {
    this.$store.dispatch("getID");
  },
  data() {
    return {
      radio: 3,
      dialogVisible: false,
      input: "",
    };
  },
  methods: {
    clear() {
      this.$store.dispatch("getID");
    },
    pay() {
      const id = this.$store.state.message.id;
      const value = this.input;
      this.$store.dispatch("getList", { id, value });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.message {
  margin-top: 20px;
}
.msg_zf {
  float: right;
  margin-bottom: 20px;
}
.qr_code {
  text-align: center;
}
</style>